<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue作用域插槽</title>
</head>
<body>
  <script src="./js/vue2.js"></script>
  <div id="app">
    <child>
      <!-- 作用域插槽固定写法, 使用template包裹，使用props接收传递来的数据 -->
      <template slot-scope="props">
        <li><h1>{{props.item}}</h1></li>
      </template>
    </child>
  </div>
</body>
</html>
<script>

  Vue.component('child',{
    data () {
      return {
        list:[1,2,3,4],  
      }
    },
    // 模板中怎么显示，由父组件传递进来的插槽决定
    template:`
      <div>
        <ul>
          <slot 
            v-for="item in list"
            :item=item
          ></slot>
        </ul>
      </div>
    `,
  });

  var vm = new Vue({
    el: '#app',
  });


  /**
    作用域插槽：
    1. 固定写法 <template slot-scope="props"> </template>

    2. 由父组件传递的内容来决定显示的内容

    3. 子组件通过绑定属性来传递数据到 template的props中

  */
</script>